<template>
    <d2-container>
        <el-tabs type="card" v-model="paneChose" editable @edit="handleTabsEdit" stretch >

            <el-tab-pane label="学生信息" name="studentAdd">
                <el-main>
                    <el-form ref="studentForm" :model="studentForm" label-width="80px" label-position="left"
                             :rules="FormRules">

                        <el-form-item label="学生姓名" prop="name">
                            <el-input placeholder v-model="studentForm.name"></el-input>
                        </el-form-item>

                        <el-form-item label="学号" prop="studentId">
                            <el-input placeholder v-model="studentForm.studentId"></el-input>
                        </el-form-item>

                        <el-form-item label="学生性别" prop="gender">
                            <el-radio-group v-model="studentForm.gender">
                                <el-radio :label="0">男</el-radio>
                                <el-radio :label="1">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="试听学生" prop="newStudent">
                            <el-radio-group v-model="studentForm.newStudent">
                                <el-radio :label="0">是</el-radio>
                                <el-radio :label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="所属校区" prop="school">
                            <el-select
                                    v-model="studentForm.school"
                                    filterable
                                    placeholder="请选择校区">
                                <el-option
                                        v-for="item in schoolList"
                                        :key="item._id"
                                        :label="item.name"
                                        :value="item._id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="手机" prop="cellphone2">
                            <el-input placeholder v-model.number="studentForm.cellphone"></el-input>
                        </el-form-item>

                        <el-form-item label="生日" prop="birthday">
                            <el-date-picker v-model="studentForm.birthday" type="date"
                                            placeholder="选择生日">
                        </el-date-picker>
                        </el-form-item>
                        <el-form-item label="公立学校" prop="publicSchool">
                            <el-input placeholder v-model="studentForm.publicSchool"></el-input>
                        </el-form-item>
                        <el-form-item label="家庭地址" prop="address">
                            <el-input placeholder v-model="studentForm.address"></el-input>
                        </el-form-item>


                        <el-form-item label="对内备注" prop="inRemark">
                            <el-input placeholder v-model="studentForm.inRemark"></el-input>
                        </el-form-item>

                        <el-form-item label="对外备注" prop="outRemark">
                            <el-input placeholder v-model="studentForm.outRemark"></el-input>
                        </el-form-item>

                    </el-form>
                </el-main>

                <el-footer style="text-align: center">
                    <el-button type="primary" @click="submitAddStudent">提交</el-button>
                    <el-button @click="resetForm('studentForm')">重置</el-button>
                </el-footer>

            </el-tab-pane>

            <!-- v-if="status.submitStudentStatus" -->
            <!-- <block>  -->
            <el-tab-pane v-for='(item,index) in parents' :key="index" :label="'家长信息' + (index + 1) " :name="'tab' + index" v-if='status.submitStudentStatus'>
                <el-main>
                    <el-form ref="parentsForm" :model="parents[index]" label-width="80px" label-position="left"
                             :rules="FormRules">

                        <el-form-item label="家长姓名" prop="name">
                            <el-input placeholder v-model="parents[index].name"></el-input>
                        </el-form-item>

                        <el-form-item label="手机" prop="cellphone">
                            <el-input placeholder v-model.number="parents[index].cellphone"></el-input>
                        </el-form-item>

                        <el-form-item label="年龄" prop="age">
                            <el-input placeholder v-model.number="parents[index].age"></el-input>
                        </el-form-item>

                        <el-form-item label="职业" prop="job">
                            <el-input placeholder v-model="parents[index].job"></el-input>
                        </el-form-item>

                        <el-form-item label="关系" prop="relation">
                            <!-- <el-input placeholder v-model="parents[index].relation" :disabled="parentsDisabled"></el-input> -->
                            <el-select v-model="parents[index].relation" placeholder="关系"   @change='hahaha'>
                            <el-option
                                    v-for="item in parentsOption"
                                    :label="item"
                                    :value="item"
                                    >
                            </el-option>
                        </el-select>
                        </el-form-item>

                        <el-form-item label="生日" prop="birthday">
                            <el-date-picker v-model="parents[index].birthday" type="date"
                                            placeholder="选择家长生日"></el-date-picker>
                        </el-form-item>
                    </el-form>

                </el-main>
                <el-footer style="text-align: center">
                    <el-button @click="resetForm(index)">重置</el-button>
                    <el-button type="primary" @click="submitBindParents(index)">提交</el-button>
                </el-footer>


            </el-tab-pane>

            <!-- </block> -->
        </el-tabs>
    
    </d2-container>
</template>

<script>
    import request from "@/plugin/axios";
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                studentForm: {
                    name: undefined,
                    studentId: undefined,
                    gender: undefined,
                    cellphone: undefined,
                    birthday: undefined,
                    publicSchool:undefined,
                    inRemark: undefined,
                    outRemark: undefined,
                    school: undefined,
                    address:undefined,
                    newStudent : 1
                },
                parents:[{
                    name: undefined,
                    cellphone: undefined,
                    birthday: undefined,
                    age: undefined,
                    job: undefined,
                    relation: undefined
                }],
                parentsForm: {
                    name: undefined,
                    cellphone: undefined,
                    birthday: undefined,
                    age: undefined,
                    job: undefined,
                    relation: undefined
                },
                FormRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    studentId: [
                        { message: '请输入学号', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请选择学生性别', trigger: 'blur'}
                    ],
                    age: [
                        { message: '请输入年龄', trigger: 'blur'},
                        {type: 'number', min: 5, max: 100, message: '年龄范围在5-100之间', trigger: 'blur'}

                    ],
                    school: [
                        {required: true, message: '请选择所在校区', trigger: 'blur'}
                    ],
                    cellphone: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'},
                        {type: 'number', message: '请输入11位合法手机号', trigger: 'blur'}
                    ],
                    cellphone2: [
                        {type: 'number', message: '请输入11位合法手机号', trigger: 'blur'}
                    ],
                    relation :[
                    {required:'true',message:'请输入关系'}
                    ],
                    birthday: [
                        {type: 'date', message: '请选择出生日期', trigger: 'blur'}
                    ]
                },
                status: {
                    selectStaff: false,
                    submitStudentStatus: false,
                },
                search:{
                    searchStaffName:undefined,
                },
                options:{
                    schoolOption:undefined,
                    staffList:undefined
                },
                paneChose: 'studentAdd',
                schoolList: [],
                disabled: false,
                        parentsOption : ['妈妈','爸爸','爷爷','奶奶','外婆','外公','其他']

            };
        },
        computed: {
            ...mapState('d2admin/user', ['info'])
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            hahaha(){
        this.parentsOption.push({})
        this.parentsOption.splice(this.parentsOption.length-1,1)
      },

            handleTabsEdit(index){
                if (index == 'studentAdd'){

                }
                if (index == null){
                    if (this.studentId != undefined){
                    this.parents.push({
                        name: undefined,
                        cellphone: undefined,
                        birthday: undefined,
                        age: undefined,
                        job: undefined,
                        relation: undefined
                    })
                    }
                }
                else{
                    let index2 = parseInt(index.replace('tab',''))
                    if (this.parents[index2]._id != undefined){
                        this.$confirm("确定要删除该家长信息吗？", "", {
                                confirmButtonText: "确定",
                                cancelButtonText: '取消',
                                type: 'info'
                            }).then((value) => {
                                console.log(value,'vava')
                                if (value){
                                    // post to delete this parent
                                    request({
                                        url: 'parent/deleteParents',
                                        method: "post",
                                        data: {id:this.parents[index2]._id}
                                    }).then(res => {
                                        if (res.code == 200) {
                                            this.parents.splice(index2)
                                            if (this.parents.length > 0){
                                                this.paneChose = 'tab0'
                                            }
                                            else{
                                                this.paneChose = 'addStudent'
                                            }
                                        }}
                                        )
                                }
                                
                            }).catch((value) => {
                                console.log('ddd')
                                // this.studentId = undefined;
                                // this.$router.push({path: "/student-list"})
                            })
                    }
                    else{
                        this.parents.splice(index2)
                        if (this.parents.length > 0){
                            this.paneChose = 'tab0'
                        }
                        else{
                            this.paneChose = 'addStudent'
                        }
                        

                    }
                }
            },
            submitAddStudent() {
                let url = "/student/addStudent";
                request({
                    url: url,
                    method: "post",
                    data: this.studentForm
                }).then(res => {
                    if (res.code == 200) {
                        this.studentId = res.data._id;
                        // this.resetForm('studentForm')
                        this.$confirm("提交学生信息成功,是否继续绑定家长信息", "提交学生成功", {
                            confirmButtonText: "确定",
                            cancelButtonText: '结束',
                            type: 'info'
                        }).then(() => {

                            this.status.submitStudentStatus = true;
                            this.paneChose = 'tab0'
                        }).catch(() => {
                            this.tempId = this.studentId
                            this.studentId = undefined;
                            this.studentForm = {
                                name: undefined,
                                studentId: undefined,
                                gender: undefined,
                                cellphone: undefined,
                                birthday: undefined,
                                publicSchool:undefined,
                                inRemark: undefined,
                                outRemark: undefined,
                                // school: undefined,
                                address:undefined,
                                newStudent : 1
                            }
                            if (this.jump){
                                this.refresh = true
                                this.$router.back(-1)
                                
                            }
                            else{
                                this.refresh = true
                                this.$router.back(-1)
                               

                            }
                        })
                    }
                });
            },
            submitBindParents(index) {
                if (this.studentId == undefined) {
                    this.$alert('请先填写学生信息并提交', '错误提示', {
                        type: "error",
                        confirmButtonText: '确定',
                    });
                } else {
                    let data = this.parents[index]
                    data.student = [this.studentId]
                    let url = "/parent/addParents";
                    request({
                        url: url,
                        method: "post",
                        data
                    }).then(res => {
                        if (res.code == 200) {
                            // this.studentId = undefined;
                            // this.status.submitStudentStatus = false;
                            // this.paneChose = 'studentAdd';
                            this.parents[index]._id = res.data._id
                            this.$confirm("家长信息提交成功,是否继续添加家长", "成功提示", {
                                confirmButtonText: "确定",
                                cancelButtonText : '结束'
                            }).then(() => {
                                // this.status.submitStudentStatus = true;
                                this.parents.push({
                                    name: undefined,
                                    cellphone: undefined,
                                    birthday: undefined,
                                    age: undefined,
                                    job: undefined,
                                    relation: undefined
                                })
                                this.paneChose = 'tab' + (this.parents.length - 1)
                            }).catch(() => {
                                this.refresh = true
                                this.studentId = undefined;
                                // if (this.jump){
                                    this.$router.back(-1)
                                // }
                                // else{
                                //     this.$router.push({path: "/student-list"})
                                // }
                                
                            })
                            // this.$router.push({path: "/student-list"});
                        }
                    });
                }
            },
            getSchoolList() {
                this.schoolList = this.info.school;
                this.studentForm.school = this.schoolList[0]._id;
                this.info.role.forEach(value=>{
                    if (value.name==='root') {
                        let data = {};
                        data.page = 1;
                        data.pageSize = 9999999;
                        request({
                            url: "/school/getSchoolList",
                            method: "post",
                            data
                        }).then(res => {
                            this.schoolList = res.data.school
                        });
                    }
                })

            },
        },

        beforeRouteLeave(to,from,next){
        if (this.refresh){
          to.meta.refresh = 'a'
          this.refresh = undefined
        }
        from.meta.keep = true
        from.meta.studentForm = this.studentForm
        from.meta.studentId = this.tempId
        next()
      },
      beforeRouteEnter(to,from,next){
            if (to.meta.keep){
                next(v=>{
                  v.studentForm = to.meta.studentForm
                  to.meta.keep = undefined
                  to.meta.studentForm = undefined
                })
            }
            else{
                next()
            }
            next()

        },
        created() {
            this.options.schoolOption = this.info.school;
            this.getSchoolList();
            this.jump = this.$route.query.from != undefined
        }
    };
</script>
